Project Overview
Recline
Many different streaming services ask for users' attention and commitment, all offering different services. Users mainly use streaming services for watching shows and nothing more, as additional means to engage with content are seen as inferior to using other websites to do the same thing. By placing greater emphasis on additional services without sacrificing the core streaming features, user attention can be retained through multiple avenues.
Recline is an anime streaming service that aims to consolidate all of the users needs as consumers into a single hub.
Color Guide
The colors were chosen as a balancing act between two seemingly opposing goals. On one hand, I wanted the colors to pop to make navigation and option selection to be clear and intuitive at a glance. But on the other hand, I wished for the colors to not be the primary focus of the page, instead wishing for the colorful anime art to grab users' attentions.
To best accomplish this compromise, the icons were left simple and uniform, on buttons that are usually supplementary to a piece of colorful art. Some colors, like the gold icon color, needed to have a certain level of saturation to make the white text properly legible. This furthered the balancing act between popping out and not stealing the attention. By keeping menus in gray and black tones, and only leaving icon colors to indicate information about the popping art, I was able to keep a cohesive design hierarchy with what the eye is drawn to.
Core Goal
Don't compromise on usual services
The core experience of finding and starting a new show was at the forefront of the user flow, as for many people this will be the primary or only function of the site. Having clear and eye grabbing options that allow for expedited watching helps retain user attention by reducing the manual effort needed to browse.
Core Goal
Easy cataloging of watched show
A core way to engage with anime content is to catalog what has been or is being watched, as well as the documentation of personal ratings. With Recline, it was important to offer these options to users to give them a sense of accomplishment, like watching more shows adds to their collection of media consumed. All options for personalization are available in a single click, all on the same screen so that the act of rating or choosing a status for a show can be done for multiple shows in quick succession.
This documentation, then, also leads to the notifications of new episodes for shows that have been documented, meaning that consistent users of the site can use this screen (along with its filters and search options) to keep up to date on their favorite shows, rather than resorting to outside news sources.
Core Goal
Extensive news section
This news section has the biggest focus on letting the anime art do the heavy lifting of captivating the user, letting the design supplement the art with only necessary information. By keeping the news section updated and relevant for both casual or experienced users, this service essentially helps advertise the sites own shows while providing yet another incentive to use this site as a main hub for all things anime.
Core Goal
Unobstructed viewing experience
As mentioned previously, the experience of watching a show episode to episode was made separate from the other services of the website, in order to not alienate those who only wish to use the site's core features. With this design, the act of subscribing and rating the show a user is watching is a single click away through the 'Episodes' button. So for both types of users, finding the right function of the website requires minimal manual effort.
Conclusion and Reflection
Working on this project helped teach me many things about being a UX designer, from the type of problems that can come up during designing, to the necessity of iterating on ideas to better meet set goals. A vision was set at the beginning of the project, a website that accommodates multiple different user bases, focusing on optimized retention and multiple ways to engage with the website's content. By honing the overall flow of the website, I was able to keep most options a few clicks away from a user at any given time, which I felt was necessary to accommodate the varying uses for the site.
Getting down the right colors, size of options and icons, and overall flow of the site took some iterating to fully get down, as initial designs were below my self set standards, pushing me to get to a level that I was satisfied with for a project like this. This process of revision helped me to understand key cornerstones of UX design, such as the use of color to indicate importance and to draw attention to key features, or the usage of size and placement to create a hierarchy of information on a given page.
Below are some comparisons between finalized pages and their initial concepts, to show the effectiveness of the iterating process. Overall I am satisfied with how this project turned out, and I am happy with now only what I have accomplished but what I learned throughout the process.
